<template>
  <div>
    <div class="content">
        <div class="title">
            <p>我的</p>
            <router-link to="set">
            <p style="color:#fff;">设置</p>
            </router-link>
        </div>
        <router-link to="mycenter">
        <div class="info">
            <img src="../assets/img/user/timg.jpg" alt="">
            <li>
                <p>{{this.global.userinfo[0].nickname}}</p>
                <span>{{this.global.userinfo[0].account}}</span>
            </li>
            <a href="#"></a>
        </div>
        </router-link>
    </div>
    <div class="list">
        <router-link to="points">
        <li>
            <img src="../assets/img/user/ico_1.png" alt="">
            <p>蚂蚁会员 <span>{{this.global.points}} 积分</span></p>
            <a href="#"></a>
        </li>
        </router-link>
        <li>
            <img src="../assets/img/user/ico_2.png" alt="">
            <p>商家服务</p>
            <a href="#"></a>
        </li>
       <div class="space"></div> 
       <li>
            <img src="../assets/img/user/ico_3.png" alt="">
            <p>账单</p>
            <a href="#"></a>
        </li>
        <li>
            <img src="../assets/img/user/ico_4.png" alt="">
            <p>总资产<span style="color:#6faf9c">账户安全险保障中</span></p>
            <a href="#"></a>
        </li>
        <router-link to="balance">
        <li>
            <img src="../assets/img/user/ico_5.png" alt="">
            <p>余额<span>{{this.global.balance}}.00元</span></p>
            <a href="#"></a>
        </li>
        </router-link>
        <li>
            <img src="../assets/img/user/ico_6.png" alt="">
            <p>余额宝</p>
            <a href="#"></a>
        </li>
         <router-link to="bank">
         <li>
            <img src="../assets/img/user/ico_7.png" alt="">
            <p>银行卡</p>
            <a href="#"></a>
        </li>
         </router-link>
        <div class="space"></div>
        <li>
            <img src="../assets/img/user/ico_8.png" alt="">
            <p>芝麻信用</p>
            <a href="#"></a>
        </li>
        <li>
            <img src="../assets/img/user/ico_9.png" alt="">
            <p>保险服务</p>
            <a href="#"></a>
        </li>
        <router-link to="flower">
        <li>
            <img src="../assets/img/user/ico_10.png" alt="">
            <p>花呗</p>
            <a href="#"></a>
        </li>
        </router-link>
        <div class="space"></div>
        <li>
            <img src="../assets/img/user/ico_11.png" alt="">
            <p>公益</p>
            <a href="#"></a>
        </li>
         <li>
            <img src="../assets/img/user/ico_12.png" alt="">
            <p>娱乐宝</p>
            <a href="#"></a>
        </li>
    </div>
    
  </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
}
</script>

<style lang="less" scoped>
.space{
    display: block;
    width: 100%;
    height: 10px;
    background-color: #f6f6f6;
}
.content{
background-color: #1c81cf;

    .title{
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        color: #fff;
    }
    .info{
        width: 90%;
        margin: 0 auto;
        display: flex;
        padding-bottom: 10px;
        img{
            width: 50px;
            height: 50px;
            border: 1px solid #73befd;
            border-radius: 5px;
        };
        li{
            display: flex;
            flex-wrap: wrap;
            color: #c4ecf3;
            margin-left: 10px;
            width: 80%;
            p{
                width: 100%;
                margin: 0;
            }
            span{
                width: 90px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                background-color: #2d89d8;
                border-radius: 20px;
                font-size: 14px;
            }
        }
        a{
                margin-top: 10px;
                display: block;
                width: 25px;
                height: 25px;
                background: url("../assets/img/right.png") no-repeat;
                background-size: 100%;
            }
    }
}
    .list{
        margin-bottom: 50px;
  
    li{
        display: flex;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid #f6f6f6;
        margin-left: 20px;
        font-size: 14px;
        img{
        width: 20px;
        height: 20px;
        }
        p{
            display: flex;
            margin-left: 10px;
            width: 83%;
            span{
                margin-left: auto;
            }
        }
        a{
            display: block;
            width: 20px;
            height: 20px;
            background: url("../assets/img/right_1.png") no-repeat;
            background-size: 100%;
        }
    }
    
  }
</style>